<template>
	<view class="myFriend" :style="[{paddingTop:(Number(statusBar)+10) + 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation-box" :style="[{top:(statusBar-2) + 'px'}]">
			<view class="navigation" >
				<!-- <image src="/static/images/back.png" class="back" @click="back()" mode=""></image> -->
				<view class="navigation-title">我的伙伴</view>
			</view>
			<view class="search-box" @click="searchFriend()">
				<image src="/static/images/serach-icon.png" class="search-icon" mode=""></image>
				<view>搜索伙伴</view>
			</view>
			<view class="tab-nav">
				<view class="tab-item" v-for="(item,index) in friendTabList" :key="index" @click="tabChange(index,item.type)">
					<view :class="[index==tabIndex?'tabActive':'tabNormal']">{{ item.tabcontent }}</view>
					<view class="tab-line" v-if="index==tabIndex"></view>
				</view>
			</view>
		</view>	
		<view class="navigation-position"></view>
		<!-- <view class="header">
			<view class="search-box" @click="searchFriend()">
				<image src="/static/images/serach-icon.png" class="search-icon" mode=""></image>
				<view>搜索伙伴</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="tab-nav">
				<view class="tab-item" v-for="(item,index) in friendTabList" :key="index" @click="tabChange(index,item.type)">
					<view :class="[index==tabIndex?'tabActive':'tabNormal']">{{ item.tabcontent }}</view>
					<view class="tab-line" v-if="index==tabIndex"></view>
				</view>
			</view>
		</view> -->
		
		
		<!-- <view class="frendList" >
			<view class="friend-list-item">
				<view class="friend-list-item-part-one">
					<view class="friend-list-item-left">
						<image src="/static/images/logo.png" class="user-img"></image>
						<view>
							<view class="user-name-box">
								<view class="user-name">张三</view>
								
							</view>
							<view class="invite-code">
								<view> 
									<text>邀请码</text>	
									<text style="margin: 0 0 0 10rpx;width:148rpx;">12345678901</text>
									<text style="margin: 0 10rpx;font-weight: 600;">|</text>
									<text style="color:#333333;">复制</text>
								</view>
							</view>
							
							<view class="invite-phone">
								<view>
									<text>手机号</text>
									<text style="margin: 0 0 0 10rpx;width:148rpx;">13888888888</text>
									<text style="margin: 0 10rpx;font-weight: 600;">|</text>
									<text style="color:#333333;">复制</text>
								</view>
							</view>
						</view>
					</view>
					<view class="friend-list-item-right">
						<view class="badge-lable-box">
							<view class="badge-lable" >
								<image src="/static/images/user-grade-vip.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" >
								<image src="/static/images/golder-grade-normal.png" class="badge-icon" mode="heightFix"></image>
							</view>
						</view>
						<view class="friend-list-item-right-tips"></view>
					</view>
					<view class="transfer-operation">
						<view class="transfer-beans" >去转金豆</view>
					</view>
				</view>	
				<view class="friend-record">
					<view class="friend-record-item">
						<view class="">个人金豆余额:</view>
						<view class="">1000个</view>
					</view>
					<view class="friend-record-item">
						<view class="">今日抢购单数:</view>
						<view class="">30单</view>
					</view>
					<view class="friend-record-item">
						<view class="">今日抢购金额:</view>
						<view class="">2000.00</view>
					</view>
					<view class="friend-record-item">
						<view class="">累计抢购金额:</view>
						<view class="">5000.00</view>
					</view>	
				</view>	
			</view>
		</view> -->
		
		
		
		
		
		<view class="frendList" v-if="pageItems.length>0">
			<view class="friend-list-item" v-for="(item,index) in pageItems" :key="index">
				<view class="friend-list-item-part-one">
					<view class="friend-list-item-left">
						<image :src="item.avatar_url" class="user-img" mode="" v-if="item.avatar_url!=''"></image>
						<image src="/static/images/logo.png" class="user-img" v-else mode=""></image>
						<view>
							<view class="user-name-box">
								<view class="user-name">{{ item.name }}</view>
								<view class="user-name-remarks user-name-remarks-normal" @click="userSetChildNickname(index,item.id)" v-if="item.nickname!=''">{{ item.nickname }}</view>
								<view class="user-name-remarks" @click="userSetChildNickname(index,item.id)" v-else >
									<text>备注昵称</text>
								</view>
							</view>
							<view class="invite-code">
								<view> 
									<text>邀请码</text>	
									<text style="margin: 0 0 0 10rpx;width:148rpx;">{{ item.invite_code }}</text>
									<text style="margin: 0 10rpx;font-weight: 600;">|</text>
									<text style="color:#333333;" @click="copy(item.invite_code)">复制</text>
								</view>
								<!-- <image src="/static/images/copycode.png" @click="copy(item.invite_code)" class="copycode" mode=""></image> -->
							</view>
							
							<view class="invite-phone">
								<view>
									<text>手机号</text>
									<text style="margin: 0 0 0 10rpx;width:148rpx;">{{ item.phone }}</text>
									<text style="margin: 0 10rpx;font-weight: 600;">|</text>
									<text style="color:#333333;" @click="copy(item.phone)">复制</text>
								</view>
								<!-- <image src="/static/images/copycode.png" @click="copy(item.phone)" class="copycode" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="friend-list-item-right">
						<!-- <view class="badge-lable" v-if="item.grade == 'vip'&&item.is_star" style="background-image: url('https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/user/badge-svip.png')">
							<view class="star"><text style="margin-right:2rpx"></text>掌柜</view>
						</view> -->
						<!-- <view class="badge-lable" v-if="item.grade == 'normal'">
							<image src="/static/images/badge-normal.png" class="badge-icon" mode="heightFix"></image>
						</view> -->
						<!-- <view class="badge-lable" v-if="item.grade == 'vip'&&!item.is_star">
							<image src="/static/images/badge-vip.png" class="badge-icon" mode="heightFix"></image>
						</view> -->
						<!-- <view class="badge-lable" >
							<image src="/static/images/badge-gold-svip.png" class="badge-icon" mode="heightFix" v-if="item.grade == 'vip'&&item.is_star&&item.is_mentor"></image>
						</view> -->
						<view class="badge-lable-box">
							<view class="badge-lable" v-if="item.grade == 'vip'">
								<image src="/static/images/user-grade-vip.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&(item.is_gold_intern==1 || item.is_gold_intern==true)&&(item.is_gold_master!=1 || item.is_gold_master==false || item.is_gold_master=='')">
								<image src="/static/images/golder-grade-normal.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<!-- <view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==1">
								<image src="/static/images/golder-grade-vip1.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==2">
								<image src="/static/images/golder-grade-vip2.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==3">
								<image src="/static/images/golder-grade-vip3.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==4">
								<image src="/static/images/golder-grade-vip4.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==5">
								<image src="/static/images/golder-grade-vip5.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==6">
								<image src="/static/images/golder-grade-vip6.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==7">
								<image src="/static/images/golder-grade-vip7.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==8">
								<image src="/static/images/golder-grade-vip8.png" class="badge-icon" mode="heightFix"></image>
							</view>
							<view class="badge-lable" v-if="item.grade == 'vip'&&item.gold_level==9">
								<image src="/static/images/golder-grade-vip9.png" class="badge-icon" mode="heightFix"></image>
							</view> -->
							<view class="badge-lable" v-if="item.grade=='vip'&&(item.is_gold_master==1 || item.is_gold_master==true)" >
								<!-- <image src="/static/images/golder-grade-vip9.png" class="badge-icon" mode="heightFix"></image> -->
								<image src="/static/images/golder-grade-icon-vip3.png"  class="badge-gvip-icon" mode="heightFix" ></image>
							</view>
							
						</view>
						
						<view class="friend-list-item-right-tips">
							<!-- <view class="need_up_star" v-if="item.grade == 'vip'&& !item.is_vip_expired&&user.is_bonus_melted">再升1星后可继续领取红包</view> -->
							<!-- <view class="vip_expired_day" v-if="item.grade == 'vip'&& !item.is_vip_expired">VIP有效期至{{ item.vip_expired_day }}</view>
							<view class="vip_expired_day" v-if="item.grade == 'vip'&& item.is_vip_expired">VIP省钱卡未续费</view> -->
						</view>
					</view>
					<view class="transfer-operation">
						<!-- <view class="transfer-accounts" v-if="isAccount" @click="goTransferAccounts(item.invite_code)">去转账</view> -->
						<view class="transfer-beans" v-if="isBean" @click="goTransferBeans(item.invite_code)">去转金豆</view>
					</view>
				</view>	
				<view class="friend-record">
					<view class="friend-record-item">
						<view class="">个人金豆余额:</view>
						<view class="">{{ item.gold_beans }}个</view>
					</view>
					<view class="friend-record-item">
						<view class="">今日抢购单数:</view>
						<view class="">{{ item.today_record_count }}单</view>
					</view>
					<view class="friend-record-item">
						<view class="">今日抢购权益价:</view>
						<view class="">{{ item.today_record_price }}</view>
					</view>
					<view class="friend-record-item">
						<view class="">累计抢购权益价:</view>
						<view class="">{{ item.total_record_price }}</view>
					</view>	
				</view>	
			</view>
		</view>
		<view class="no-more" v-if="pageHasNoMore&&pageItems.length!=0" >
		  --- 没有更多数据了 ---
		</view>
		<view class="nodata-box" v-if="pageItems.length==0">
			<image src="/static/images/nodata-icon.png" mode="" class="nodata-icon"></image>
			<view class="nodata-text">暂无数据</view>
		</view>
		<view class="bind-recommender-pop" v-if="bindPopShow">
			<view class="bind-recommender-pop-content">
				<view class="bind-recommender-pop-title">伙伴备注</view>
				<input type="text" class="invite-code-ipt" value="" placeholder="请输入伙伴备注昵称" v-model="nickname" />
				<view class="bind-recommender-pop-bar">
					<view @click="cancle()">取消</view>
					<view @click="conform()">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { getTeamList } from "api/userTeamApi.js"
	import { userSetChildNickname } from "api/userApi.js"
	import Pagination from "mixins/Pagination"
	import AuthChecking from "mixins/AuthChecking"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar',
				'isLogin'
			])
		},
		mixins:[Pagination,AuthChecking],
		data(){
			return {
				friendTabList:[
					{tabcontent:'全部',type:'all'},
					{tabcontent:'VIP伙伴',type:'vip'},
					{tabcontent:'见习炼金师',type:'intern'},
					{tabcontent:'炼金师',type:'master'}
					
					// {tabcontent:'掌柜伙伴',type:'svip'},
				],
				tabIndex:0,
				teamList:[],
				scopeType:'all',
				nickname:'',
				userNicknameId:null,
				bindPopShow:false,
				userNicknameIndex:null,
				isAccount:false,
				isBean:false,
				from:'',
				source:source
			}
		},
		methods:{
			...mapMutations([
				'setStatusBar'
			]),
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			tabChange(index,type){
				this.tabIndex = index;
				this.scopeType = type;
				this.pageNumber = 1;
				this.pageHasNoMore = false;
				this.pageItems = [];
				this.loadPageData()
			},
			goTransferAccounts(code){
				if(this.from=='other'){
					var pages= getCurrentPages()
					var prevPage = pages[pages.length-2]
					prevPage.$vm.backEvent(code)
					uni.navigateBack()
				}else{
					uni.navigateTo({url: '/packs/pages/activity/activityMoveAccounts?code=' + code })
				}
			},
			goTransferBeans(code){
				if(this.from=='other'){
					var pages= getCurrentPages()
					var prevPage = pages[pages.length-2]
					prevPage.$vm.backEvent(code)
					uni.navigateBack()
				}else{
					uni.navigateTo({url: '/packs/pages/activity/activityGoinsMoveAccount?code=' + code })
				}
			},
			searchFriend(){
				if(this.isAccount){
					uni.navigateTo({url: '/packs/pages/searchFriend/searchFriend?isAccount=' + this.isAccount + '&from=other'})
				}else if(this.isBean){
					uni.navigateTo({url: '/packs/pages/searchFriend/searchFriend?isBean=' + this.isBean + '&from=other'})
				}else{
					uni.navigateTo({url: '/packs/pages/searchFriend/searchFriend'})
				}
			},
			getTeamList(){
				getTeamList(this.scopeType).then(res=>{
					this.teamList = res.data;
				})
			},
			async loadPageItems() {
			  return await getTeamList(this.scopeType,{page: this.pageNumber})
			},
			copy(data){
				// uni.setClipboardData({
				//     data: data,
				// 		showToast:false,
				//     success: function () {
				// 			// uni.showToast({
				// 			// 	icon:'none',
				// 			// 	title:'复制成功'
				// 			// }) 
				//     }
				// })
				
				const textarea = document.createElement('textarea')
				textarea.value = data
				textarea.readOnly = true
				document.body.appendChild(textarea)
				textarea.select()
				textarea.setSelectionRange(0, data.length)
				document.execCommand('copy')
				textarea.remove()
				uni.showToast({
					icon:'none',
					title:'复制成功',
					duration:800
				}) 
				
			},
			userSetChildNickname(index,id){
				this.userNicknameId = id
				this.bindPopShow = true
				this.userNicknameIndex = index
			},
			async conform(){
				let parms = {
					nickname:this.nickname
				}
				let id = this.userNicknameId
				let response = await userSetChildNickname(id,parms)
				this.bindPopShow = false 
				if(!response.message){
					this.pageItems[this.userNicknameIndex].nickname = this.nickname
					
					uni.showModal({
						content:'备注成功',
						showCancel:false
					})
				}else{
					uni.showModal({
						title:'提示',
						content:Object.values(response.errors)[0][0],
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
				this.nickname = ''
				this.userNicknameIndex = null
				this.userNicknameId = null
			},
			async cancle(){
				this.bindPopShow = false
			}
		},
		async onShow() {
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			if(await this.isLogin){
				this.loadPageData()
			}
		},
		onLoad(options) {
			if(options.isAccount){
				this.isAccount = JSON.parse(options.isAccount)
				if(this.isAccount){
					this.isBean = false
				}
			}
			if(options.isBean){
				this.isBean = JSON.parse(options.isBean)
				if(this.isBean){
					this.isAccount = false
				}
			}
			if(options.from){
				this.from = options.from
			}
		}
	}
</script>

<style scoped  lang="scss">
	page{
		background: #F6F6F6;
	}
	
	.status {
		width: 100%;
		position: fixed;
		left:0;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation-box{
		width: 100%;
		// height: 200rpx;
		height: 304rpx;
		height: 284rpx;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		// height: 50rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.navigation-position{
		width: 100%;
		height: 200rpx;
		// height: 150rpx;
		height: 304rpx;
		height: 284rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.header{
		width: 100%;
		// height: 212rpx;
		background: #F6F6F6;
		position: fixed;
		left:0;
		top:80rpx;
		z-index: 99;
	}
	.search-box{
		width: 686rpx;
		height: 64rpx;
		background: #EEEEEE;
		border-radius: 36rpx 40rpx 40rpx 36rpx;
		display: flex;
		align-items: center;
		margin: 20rpx auto 0;
		>view{
			font-size: 24rpx;
			font-weight: 400;
			color: #CCCCCC;
		}
	}
	.search-icon{
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin:0 12rpx 0 24rpx;
	}
	.tab-nav{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 120rpx;
		// height: 100rpx;
	}
	.tab-item{
		width: 218rpx;
		text-align: center;
		position: relative;
	}
	.tabActive{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.tabNormal{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
	.tab-line{
		width: 48rpx;
		height: 4rpx;
		background: #333333;
		position: absolute;
		left:50%;
		margin-left: -24rpx;
		bottom:-10rpx;
		bottom:-20rpx;
	}
	.frendList{
		width: 100%;
		width: 710rpx;
		min-height: 200rpx;
		margin: 0 auto;
		// background: #FFFFFF;
		// border-radius: 32rpx 32rpx 16rpx 16rpx;
		// padding-bottom: 30rpx;
		>view:last-child{
			border: none;
		}
	}
	.friend-list-item{
		width: 686rpx;
		// width: 666rpx;
		// width: 636rpx;
		// height: 148rpx;
		margin: 0 auto;
		background: #FFFFFF;
		// border-bottom: 1rpx solid #F0F0F0;
		// padding: 30rpx 0 50rpx 0;
		// padding: 30rpx 0 20rpx 0;
		position: relative;
		border-radius: 20rpx;
		padding: 20rpx 10rpx 20rpx 10rpx ;
		margin-bottom: 15rpx;
	}
	.friend-list-item-part-one{
		width: 666rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		position: relative;
	}
	.friend-list-item-left{
		display: flex;
		>view{
			margin-left:20rpx;
		}
	}
	.user-img{
		display: block;
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
		margin-top: 15rpx;
	}
	.user-name{
		max-width:220rpx;
		font-size: 28rpx;
		// font-weight: 400;
		font-weight: 600;
		color: #333333;
		margin-top: 12rpx;
		margin-right: 15rpx;
		overflow: hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.user-name-box{
		display: flex;
	}
	.user-name-remarks{
		font-size: 20rpx;
		max-width:150rpx;
		padding:6rpx 15rpx 4rpx 15rpx;
		height: 32rpx;
		border: 1rpx solid;
		border-radius: 25rpx;
		line-height:20rpx;
		height: 20rpx;
		margin-top: 14rpx;
		background: #FED161;
		color:#333333;
		overflow: hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.invite-code{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		color: #333333;
		line-height: 44rpx;
		// margin-top: 10rpx;
		display: flex;
		align-items: center;
		>view{
			display: flex;
			>text:nth-child(1){
				// color: #333333;
			}
		}
	}
	.invite-phone{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		color: #333333;
		line-height: 44rpx;
		// margin-top:5rpx;
		display: flex;
		align-items: center;
		>view{
			display: flex;
			>text:nth-child(1){
				// color: #333333;
			}
		}
	}
	.copycode{
		display: block;
		width: 26rpx;
		height: 26rpx;
		margin-left: 15rpx;
	}
	.badge-lable-box{
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	.badge-lable{
		display: flex;
		// min-width: 84rpx;
		height: 45rpx;
		background-size: 100% 45rpx;
		position: relative;
	}
	.star{
		width: 100%;
		padding-left: 42rpx;
		display: flex;
		font-size:16rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		margin:14rpx 16rpx 0 0;
	}
	.badge-icon{
		display: block;
		height: 40rpx;
		margin-right: 8rpx;
	}
	.badge-gvip-icon{
		display: block;
		height: 40rpx;
		margin-right: 8rpx;
	}
	.no-more{
		text-align: center;
		font-size: 26rpx;
		color:#999999;
		margin-top: 30rpx;
	}
	
	.nodata{
		width: 100%;
		height: 50rpx;
		position: absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.nodata-box{
		width: 100%;
		height: 390rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		left:0;
		right: 0;
		top:0;
		bottom: 0;
		margin: auto;
	}
	.nodata-icon{
		display: block;
		width: 320rpx;
		height: 320rpx;
	}
	.nodata-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
	}
	.nodata-text1{
		margin-top: 15rpx;
	}
	.transfer-accounts{
		width: 150rpx;
		height: 60rpx;
		background: #FE364B;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
	.transfer-beans{
		width: 150rpx;
		height: 60rpx;
		background:#FFAC2D ;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		// margin-top: 15rpx;
	}
	.transfer-operation{
		width: 150rpx;
		height: 125rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		bottom: 0rpx;
		display: flex;
		flex-direction: column;
	}
	.friend-list-item-right-tips{
		position: absolute;
		right:0;
		bottom: 45rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.need_up_star{
		font-size: 20rpx;
		color:#8461F8;
	}
	.vip_expired_day{
		font-size: 22rpx;
		color:#999999;
	}
	.bind-recommender{
		color:#FF5F4D;
	}
	.bund-recommender{
		color:#999999;
	}
	.bind-recommender-pop{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		background: rgba(0,0,0,.5);
		z-index: 999;
	}
	.bind-recommender-pop-content{
		width:600rpx;
		height:350rpx;
		position: absolute;
		left:0;
		top:0;
		right: 0;
		bottom: 0;
		margin:auto;
		background: #FFFFFF;
		border-radius: 20rpx;	
	}
	.bind-recommender-pop-title{
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 90rpx;
	}
	.bind-recommender-pop-bar{
		width: 100%;
		display: flex;
		height: 80rpx;
		position: absolute;
		background: #F6F6F6;
		border-radius: 0 0 20rpx 20rpx;
		left:0;
		bottom: 0;
		>view{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			font-size: 28rpx;
		}
		>view:nth-child(1){
			color: #999999;
		}
		>view:nth-child(2){
			background: #FED161;
			color: #666666;
			border-radius: 0 0 20rpx 0rpx;
		}
	}
	.invite-code-ipt{
		width:550rpx;
		margin:40rpx auto;
		font-size: 28rpx;
	}
	.friend-record{
		margin-top: 15rpx;
	}
	.friend-record-item{
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
		>view:nth-child(1){
			// margin-left: 134rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
			color: #333333;
			// font-weight: 500;
		}
		>view:nth-child(2){
			margin-right:20rpx;
			font-size: 28rpx;
			color: #FF9500;
			// font-weight: 500;
		}
		
	}
</style>
